<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/锤子.css">
    <script src="../JavaScript/锤子.js"></script>
</head>

<body>

    <div class="backtop">
        <img src="../icon/回顶部.png" alt="">
    </div>
    <!-- 大盒子 -->
    <div class="big_box">
        <!-- 头部导航栏 -->
        <div class="header clearfix">
            <!-- logo -->
            <div class="logo fl_left">
                <img class="fr_right" src="../icon/logo.png" alt="">
            </div>

            <div class="navigation_bar clearfix">
                <ul class="fl_left">
                    <li><a href="">在线商城</a></li>
                    <li><a href="https://www.smartisan.com/r2/">坚果R2</a></li>
                    <li><a href="https://www.smartisan.com/tnt-go/">Smartisan TNT go</a></li>
                    <li><a href="https://www.smartisan.com/tnt/overview">坚果TNT工作站</a></li>
                    <li><a href="https://www.smartisan.com/os/#/6-x">Smartisan OS</a></li>
                    <li><a href="https://yun.smartisan.com/#/">欢喜云</a></li>
                    <li><a href="https://www.smartisan.com/apps/#/home">应用</a></li>
                    <li><a href="https://bbs.smartisan.com/forum.php">论坛</a></li>
                    <li><a href="https://dev.smartisan.com/#/tnt">开发者支持</a></li>
                    <li><a href="https://www.smartisan.com/support/#/awards">荣誉与奖项</a></li>
                    <li><a href="https://www.smartisan.com/support/#/join">加入我们</a></li>
                    <li><a href="https://www.smartisan.com/apps/#/mall">下载APP</a></li>
                </ul>
                <div class="elf1">
                    <img src="../icon/精灵图.png" alt="">
                </div>
                <div class="elf2">
                    <img src="../icon/精灵图.png" alt="">
                </div>
            </div>

        </div>

        <!-- 顶部白盒子，粘性定位布局 -->
        <div class="nav_box">
            <div class="nav clearfix">
                <ul class="fl_left clearfix nav_list">
                    <li><a href="">首页</a></li>
                    <li><a href="https://www.smartisan.com/category/151">坚果手机</a></li>
                    <li><a href="https://www.smartisan.com/category/896">TNT</a></li>
                    <li><a href="https://www.smartisan.com/category/747?type=shop">官方自营</a></li>
                    <li><a href="">服务</a></li>
                </ul>
                <div class="search fr_right clearfix">
                    <div class="search_content fl_left clearfix">
                        <div class="btn fl_left">
                            <img src="../icon/搜索.png" alt="">
                        </div>
                        <input class="fl_left inp" type="search">
                        <div class="nut_r2">
                            <a href="https://www.smartisan.com/item/100162801">坚果R2</a>
                        </div>
                        <div class="tnt">
                            <a href="https://www.smartisan.com/item/100187101">TNT</a>
                        </div>
                    </div>
                </div>

                <!-- 右侧两个小图标 -->
                <div class="small_icon fr_right">
                    <a href="">
                        <img src="../icon/用户.png" alt="">
                    </a>
                    <a href="" class="shopping_bag">
                        <img src="../icon/购物袋.png" alt="">
                    </a>
                    <div class="shopping_car">
                        <img src="../icon/购物车空.png" alt=""><br>
                        <div class="small_triangle"></div>
                        <div class="small_triangle1"></div>
                        <div>
                            <p><strong>购物车为空</strong><br>
                                您还没有选购任何商品，现在前往商城选购吧！
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- tab栏盒子 -->
            <div class="tab">
                <ul>
                    <li>
                        内容一
                    </li>
                    <li>
                        内容二
                    </li>
                    <li>
                        内容三
                    </li>
                    <li>
                        内容四
                    </li>
                    <li>
                        内容五
                    </li>
                </ul>
            </div>
        </div>

        <!-- 内容块 -->
        <div class="content_box">

            <div class="content">

                <!-- 搜索框关键词列表 -->
                <div class="list">
                    <!-- 两个小三角 -->
                    <div class="triangle"></div>
                    <div class="triangle1"></div>
                    <ul>
                        <li><a href="">坚果R2</a></li>
                        <li><a href="">TNT</a></li>
                        <li><a href="">蓝牙耳机</a></li>
                        <li><a href="">移动电源</a></li>
                        <li><a href="">坚果快充</a></li>
                        <li><a href="">坚果R2保护套</a></li>
                    </ul>
                </div>


                <!-- 轮播图 -->
                <div class="swiper">
                    <img class="swiper_photo" src="../images/轮播图3.png" alt="">
                </div>
                <!--模板一 小图展示区 -->
                <div class="small_photo clearfix">
                    <div>
                        <img src="../images/模板1-1.png" alt="">
                    </div>
                    <div>
                        <img src="../images/模板1-2.png" alt="">
                    </div>
                    <div>
                        <img src="../images/模板1-3.png" alt="">
                    </div>
                    <div>
                        <img src="../images/模板1-4.png" alt="">
                    </div>
                </div>

                <!-- 模板二 -->
                <div class="template_one clearfix">
                    <div class="tittle clearfix">
                        <p class="fl_left">热门商品</p>
                        <div class="direction fr_right">
                            <span>&lt;</span>
                            <span>&gt;</span>
                        </div>
                    </div>
                    <div class="pic clearfix">
                        <div class="one">
                            <a href="">
                                <img src="../images/模板2-1.png" alt="">
                                <p class="p1">坚果 R2</p>
                                <p class="p2">是下一代手机，更是下一代电脑</p>
                                <p class="p3">￥3,299.00</p>
                            </a>
                        </div>
                        <div class="two">
                            <a href="">
                                <img src="../images/模板2-2.png" alt="">
                                <p class="p1">Smartisan TNT 大满足套装</p>
                                <p class="p2">下一代手机，下一代电脑</p>
                                <p class="p3">￥4,999.00</p>
                            </a>
                        </div>
                        <div class="three link">
                            <a href="">
                                <img src="../images/模板2-3.png" alt="">
                                <p class="p1">Smartisan 真无线蓝牙耳机（抖音文创限量款网红款）罗老师直播间推荐</p>
                                <p class="p2 p_text">抖音文创限量款</p>
                                <p class="p3">￥149.00 <del>￥299.00</del></p>
                                <div class="depreciate">直降</div>
                            </a>
                        </div>
                        <div class="four">
                            <a href="">
                                <img src="../images/模板2-4.png" alt="">
                                <p class="p1">Smartisan 真无线TWS蓝牙耳机</p>
                                <p class="p2">智能配对 开盖即连</p>
                                <p class="p3">￥99.00</p>
                            </a>
                        </div>
                    </div>

                    <!-- 模板三 -->
                    <div class="template_two clearfix">
                        <div class="tittle">
                            <p>坚果 R2 及配件</p>
                        </div>
                        <div class="copy">
                            <div class="first">
                                <a href="">
                                    <img src="../images/模板3-1.png" alt="">
                                </a>
                            </div>
                            <div class="second">
                                <a href="">
                                    <img src="../images/模板3-2.png" alt="">
                                    <p class="p1">坚果 R2</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥4399.00</p>
                                </a>
                            </div>
                            <div class="third">
                                <a href="">
                                    <img src="../images/模板3-3.png" alt="">
                                    <p class="p1">锤子12 plus</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥5499.00</p>
                                </a>
                            </div>
                            <div class="fourth">
                                <a href="">
                                    <img src="../images/模板3-4.png" alt="">
                                    <p class="p1">坚果 R6</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥4999.00</p>
                                </a>
                            </div>
                            <div class="fifth">
                                <a href="">
                                    <img src="../images/模板3-5.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套</p>
                                    <p class="p2">7种主题随机发货</p>
                                    <p class="p3">￥69.00</p>
                                </a>
                            </div>
                            <div class="sixth">
                                <a href="">
                                    <img src="../images/模板3-6.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 3M 开始销售透明胶带</p>
                                    <p class="p2">为了那些改变人类足迹的进程</p>
                                    <p class="p3">￥4299.00</p>
                                </a>
                            </div>

                            <div class="seventh">
                                <a href="">
                                    <img src="../images/模板3-7.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 圆珠笔的改进者出生</p>
                                    <p class="p2">为了那些改变人类足迹的进程</p>
                                    <p class="p3">￥89.00</p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 模板四 -->
                    <div class="template_two clearfix">
                        <div class="tittle">
                            <p>Smartisan TNT</p>
                        </div>
                        <div class="copy">
                            <div class="first">
                                <a href="">
                                    <img src="../images/模板4-1.png" alt="">
                                </a>
                            </div>
                            <div class="second">
                                <a href="">
                                    <img src="../images/模板4-2.png" alt="">
                                    <p class="p1">Smartisan TNT 大满足套装</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥4399.00</p>
                                </a>
                            </div>
                            <div class="third">
                                <a href="">
                                    <img src="../images/模板4-3.png" alt="">
                                    <p class="p1">Smartisan TNT 大满足套装</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥5499.00</p>
                                </a>
                            </div>
                            <div class="fourth">
                                <a href="">
                                    <img src="../images/模板4-4.png" alt="">
                                    <p class="p1">Smartisan TNT go</p>
                                    <p class="p2">欢迎使用下一代电脑</p>
                                    <p class="p3">￥4999.00</p>
                                </a>
                            </div>
                            <div class="fifth">
                                <a href="">
                                    <img src="../images/模板4-5.png" alt="">
                                    <p class="p1">Smartisan TNT go</p>
                                    <p class="p2">7种主题随机发货</p>
                                    <p class="p3">￥6669.00</p>
                                </a>
                            </div>
                            <div class="sixth three link1">
                                <a href="">
                                    <img src="../images/模板4-6.png" alt="">
                                    <p class="p1">Smartisan 智能手写笔</p>
                                    <p class="p2 p_text1">尽情挥洒创造力</p>
                                    <p class="p3">￥99.00</p>
                                    <div class="depreciate">直降</div>
                                </a>
                            </div>

                            <div class="seventh ">
                                <a href="">
                                    <img src="../images/模板4-7.png" alt="">
                                    <p class="p1">
                                        Smartisan 手机立式扩展坞</p>
                                    <p class="p2">连屏幕，连外设，手机拓展一步到位</p>
                                    <p class="p3">￥289.00</p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 模板五 -->
                    <div class="template_two clearfix">
                        <div class="tittle">
                            <p>官方精选配件</p>
                        </div>
                        <div class="copy">
                            <div class="first">
                                <a href="">
                                    <img src="../images/模板5-1.png" alt="">
                                </a>
                            </div>
                            <div class="second three link2">
                                <a href="">
                                    <img src="../images/模板5-2.png" alt="">
                                    <p class="p1">坚果 R2</p>
                                    <p class="p2 p_text2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥4399.00</p>
                                    <div class="depreciate">直降</div>
                                </a>
                            </div>
                            <div class="third">
                                <a href="">
                                    <img src="../images/模板5-3.png" alt="">
                                    <p class="p1">锤子12 plus</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥5499.00</p>
                                </a>
                            </div>
                            <div class="fourth">
                                <a href="">
                                    <img src="../images/模板5-4.png" alt="">
                                    <p class="p1">坚果 R6</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥4999.00</p>
                                </a>
                            </div>
                            <div class="fifth three link3">
                                <a href="">
                                    <img src="../images/模板5-5.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套</p>
                                    <p class="p2 p_text3">7种主题随机发货</p>
                                    <p class="p3">￥69.00</p>
                                    <div class="depreciate">直降</div>
                                </a>
                            </div>
                            <div class="sixth">
                                <a href="">
                                    <img src="../images/模板5-6.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 3M 开始销售透明胶带</p>
                                    <p class="p2">为了那些改变人类足迹的进程</p>
                                    <p class="p3">￥4299.00</p>
                                </a>
                            </div>

                            <div class="seventh">
                                <a href="">
                                    <img src="../images/模板5-7.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 圆珠笔的改进者出生</p>
                                    <p class="p2">为了那些改变人类足迹的进程</p>
                                    <p class="p3">￥89.00</p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 模板六 -->
                    <div class="template_two clearfix">
                        <div class="tittle">
                            <p>足迹系列保护套</p>
                        </div>
                        <div class="copy">
                            <div class="first">
                                <a href="">
                                    <img src="../images/模板6-1.png" alt="">
                                </a>
                            </div>
                            <div class="second three link4">
                                <a href="">
                                    <img src="../images/模板6-2.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套</p>
                                    <p class="p2 p_text4">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥39.00</p>
                                    <div class="depreciate">直降</div>
                                </a>
                            </div>
                            <div class="third">
                                <a href="">
                                    <img src="../images/模板6-3.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 正电子的发现者出生</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥5499.00</p>
                                </a>
                            </div>
                            <div class="fourth">
                                <a href="">
                                    <img src="../images/模板6-4.png" alt="">
                                    <p class="p1">足迹保护套 克里斯蒂安·多普勒出生 for iPhone</p>
                                    <p class="p2">是下一代手机，更是下一代电脑</p>
                                    <p class="p3">￥199.00</p>
                                </a>
                            </div>
                            <div class="fifth three link5">
                                <a href="">
                                    <img src="../images/模板6-5.png" alt="">
                                    <p class="p1">足迹保护套 莱卡成为第一只进入地球轨道的动坚果 R2 足迹系列保护套</p>
                                    <p class="p2 p_text5">7种主题随机发货</p>
                                    <p class="p3">￥69.00</p>
                                    <div class="depreciate">直降</div>

                                </a>
                            </div>
                            <div class="sixth">
                                <a href="">
                                    <img src="../images/模板6-6.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 联合国通过《儿童权保护套》 3M 开始销售透明胶带</p>
                                    <p class="p2">为了那些改变人类足迹的进程</p>
                                    <p class="p3">￥4299.00</p>
                                </a>
                            </div>

                            <div class="seventh">
                                <a href="">
                                    <img src="../images/模板6-7.png" alt="">
                                    <p class="p1">坚果 R2 足迹系列保护套 圆珠笔的改进者出生</p>
                                    <p class="p2">为了那些改变人类足迹的进程</p>
                                    <p class="p3">￥189.00</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模块七 -->
                <div class="template_seven clearfix">
                    <div class="tittle">
                        <p class="fl_left">论坛精选</p>
                        <button class="go_lt fr_right">前往论坛&nbsp;&nbsp;></button>
                    </div>
                    <div class="tribune clearfix">
                        <div class="tribune_one fl_left">
                            <a href="">
                                <img src="../images/模板7-1.png" alt="">
                                <p class="tribune_p1">Smartisan OS v8.0.1 更新日志的改进者出生</p>
                                <p class="tribune_p2">Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
                                <span>阅读全文 ></span>
                            </a>
                        </div>
                        <div class="tribune_two fl_left">
                            <a href="">
                                <img src="../images/模板7-2.png" alt="">
                                <p class="tribune_p1">坚果 R2 购买及使用常见问题</p>
                                <p class="tribune_p2">你关心的各种问题~</p>
                                <span>阅读全文 ></span>
                            </a>
                        </div>
                        <div class="tribune_three fl_left">
                            <a href="">
                                <img src="../images/模板7-3.png" alt="">
                                <p class="tribune_p1">R2体验新鲜出炉，上手两小时体验好评不断</p>
                                <p class="tribune_p2">新鲜出炉上手体验</p>
                                <span>阅读全文 ></span>
                            </a>
                        </div>
                        <div class="tribune_four fl_left">
                            <a href="">
                                <img src="../images/模板7-4.png" alt="">
                                <p class="tribune_p1">我的Smartisan手机</p>
                                <p class="tribune_p2">祝新品大卖。</p>
                                <span>阅读全文 ></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部盒子 -->
        <div class="footer_box">
            <div class="footer clearfix">
                <!-- 左边盒子 -->
                <div class="left fl_left clearfix">
                    <ul class="fl_left">
                        <li>订单服务</li>
                        <li><a href="">购买指南</a></li>
                        <li><a href="">送货政策</a></li>
                    </ul>

                    <ul class="fl_left">
                        <li>服务支持</li>
                        <li><a href="">自助服务</a></li>
                        <li><a href="">维修门店</a></li>
                    </ul>

                    <ul class="fl_left">
                        <li>媒体中心</li>
                        <li><a href="">新闻动态</a></li>
                        <li><a href="">官方视频</a></li>
                        <li><a href="">图片资源</a></li>
                    </ul>

                    <ul class="fl_left">
                        <li>关注我们</li>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">官方微信</a></li>
                        <li><a href="">荣誉奖项</a></li>
                    </ul>
                </div>
                <!-- 右边盒子 -->
                <div class="right fr_right clearfix">
                    <p class="text1 fr_right">400 - 603 - 5000</p>
                    <p class="text2">周一到周日 9:00 - 18:00
                        <span class="fr_right">(仅收市话费)</span>
                    </p>
                    <button class="push fr_right">
                        <span>?</span><a href="">在线帮助</a>
                    </button>
                </div>

            </div>

            <!-- 版权声明 -->
            <div class="copy">
                <p>
                    Copyright © 2020 smartisan.com 版权所有&nbsp;
                    <a href="">锤子商城隐私政策</a>&nbsp;<span>|</span>&nbsp;
                    <a href="">锤子商城用户协议</a>&nbsp;<span>|</span>&nbsp;
                    <a href="">资质证照</a><br>
                    <a href="">京 ICP 备 19048576 号 - 1</a>&nbsp;<span>|</span>&nbsp;
                    <img src="../icon/工商.png" alt="">
                    <a href="">京公网安备 11010502039854号</a>&nbsp;<span>|</span>&nbsp;
                    <a href="">京食药网食备 202010031</a>
                </p>
            </div>
        </div>
    </div>
</body>

</html>